<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
    <head th:include="include :: header"></head>
    <body class="hold-transition skin-blue sidebar-mini">

        <div class="modal fade" id="modal-create-client">
            <div class="modal-dialog" style="width:500px">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title">客户信息</h4>
                    </div>
                    <div class="modal-body">
                        <form id="clientForm" class="form-horizontal">
                            <input type="hidden" id="id" name="id">
                            <div class="form-group">
                                <label class="col-sm-4 control-label">客户名</label>
                                <div class="col-sm-6">
                                    <input type="text" class="form-control" name="name" placeholder="请输入客户名">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label">分组排序</label>
                                <div class="col-sm-6">
                                    <input type="number" class="form-control" name="orderNo" placeholder="请输入分组排序">
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-info" id="btn-create-factory">提交</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    </div>
                </div>
            </div>
        </div>

        <section class="content-header">
            <h1>
                客户列表
            </h1>
        </section>
        <section class="content">
            <div class="row">
                <div class="col-xs-12">
                    <div class="box">
                        <div class="box-header">
                            <form id="queryForm" onsubmit="return false">
                                <div class="row">
                                    <div class="form-inline">
                                        <div class="form-group" style="margin-right: 10px;">
                                            <label>名称</label>
                                            <input type="text" name="name" class="form-control" placeholder="请输入客户名">
                                        </div>
                                        <button type="button" class="btn btn-success" id="btn-search">
                                            <!--<i class="fa fa-search"></i>-->
                                            <span class="Bold">搜索</span>
                                        </button>
                                        <a href="javascript:void(0);" class="btn btn-info pull-right" onclick="openCreateClientModal()">
                                            <!--<i class="fa fa-plus"></i>-->
                                            <span class="Bold">添加</span>
                                        </a>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="box-body">
                            <table id="bootstrap-table"></table>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <div th:include="include :: footer"></div>
        <script th:inline="javascript">

            var table;

            /**
             * 打开创建权限模态框
             */
            function openCreateClientModal() {
                js.modal.open("modal-create-client");
            }

            /**
             * 打开模态框同时根据ID查询并回显数据
             */
            function openEditFactoryModal(id) {
                js.post({
                    url: ctx + "config/client/id",
                    data: {
                        id: id
                    },
                    success: function (result) {
                        $("#clientForm").fillData(result);
                        js.modal.open("modal-create-client");
                        js.modal.closeLoading();
                        // 验证无法触发隐藏状态的表单，回显示数据后延时半秒先做验证，
                        // 否则提交如果有远程验证则需点击两次
                        setTimeout(function () {
                            js.validate.validing("clientForm");
                        }, 500);
                    }
                })
            }

            /**
             * 根据ID删除权限
             */
            function delFactory(id) {
                js.modal.confirm("确认删除此客户吗？", function (result) {
                    js.post({
                        url: ctx + "config/client/del",
                        data: {
                            id: id,
                            status: 0
                        },
                        success: function (result) {
                            if (result.type === web_status.SUCCESS) {
                                js.modal.success(result.msg);
                                js.table.refresh(table);
                            } else {
                                js.modal.warning(result.msg);
                            }
                            js.modal.closeLoading();
                        }
                    })
                })
            }

            $(function () {

                /**
                 * 加载列表
                 */
                table = js.table.init({
                    url: ctx + "config/client/list",
                    columns: [
                        {
                            title: '序号', field: 'id', width: '40',
                            formatter: function (value, row, index, field) {
                                return index + 1;
                            }
                        },
                        {title: '客户名称', field: 'name'},
                        {title: '排序', field: 'orderNo'},
                        {
                            title: '操作',
                            formatter: function (value, row, index) {
                                var actions = [];
                                actions.push('<a class="btn btn-warning btn-xs" href="javascript:void(0)" onclick="openEditFactoryModal(' + row.id + ')"> 编辑</a> ');
                                actions.push('<a class="btn btn-danger btn-xs" href="javascript:void(0)" onclick="delFactory(' + row.id + ')"> 删除</a>');
                                return actions.join('');
                            }
                        }
                    ]
                });

                /**
                 * 表格搜索
                 */
                $("#btn-search").click(function () {
                    js.table.search(table);
                });

                /**
                 * 初始化验证
                 */
                js.validate.init("clientForm", {
                    fields: {
                        name: {
                            validators: {
                                notEmpty: {message: '请输入客户名称'},
                                remote: {
                                    url: ctx + "config/client/checkUnique",
                                    message: '客户名称已存在',
                                    delay: 200,
                                    type: 'POST',
                                    data: {
                                        id: function () {
                                            return $("#id").val();
                                        }
                                    }
                                }
                            }
                        }
                    }
                });

                /**
                 * 创建或编辑
                 */
                $("#btn-create-factory").click(function () {
                    var url = ctx + "config/client/save";
                    if ($("#id").val()) {
                        url = ctx + "config/client/update";
                    }
                    js.validSubmit({
                        formId: "clientForm",
                        url: url,
                        data: new FormData($("#clientForm")[0]),
                        success: function (result) {
                            if (result.type === web_status.SUCCESS) {
                                js.modal.success(result.msg);
                                js.table.refresh(table);
                                js.modal.hide("modal-create-client");
                            } else {
                                js.modal.warning(result.msg);
                            }
                            js.modal.closeLoading();
                        }
                    });
                });

                /**
                 * 模态框隐藏事件， 重置表单，重置验证
                 */
                js.modal.hideEvent("modal-create-client", function () {
                    js.validate.reset("clientForm");
                    js.reset("clientForm");
                })
            });
        </script>
    </body>
</html>
